<template>
  <div>
    <!-- 头 -->
    <navbar />
    <!-- 点单商家 -->
    <van-tabs v-model="active">
      <!-- 添加第一张卡片 -->
      <van-tab title="生日蛋糕">
        <van-card>
          <template #tags>
            <div class="address-span">
              <van-icon name="location-o" size="24" />
              <span>尚且没有送货地址,请您及时填写送货地址</span>
            </div>
            <div class="address-btn">
              <van-button size="mini">自提</van-button>
              <van-button size="mini">外卖</van-button>
            </div>
          </template>
        </van-card>
        <van-tree-select
          height="calc(100vh - 180px)"
          :items="birthcake"
          :main-active-index.sync="select"
        >
          <template #content>
            <div class="goodsCard" v-for="(item, index) in list" :key="item.id">
              <div @click="toDetail">
                <div>
                  <van-image
                    width="4rem"
                    height="4rem"
                    fit="cover"
                    :src="item.image"
                  />
                </div>
                <div style="margin-left: 8px">
                  <h4>{{ item.goods_name }}</h4>
                  <span>¥{{ item.price }}</span>
                </div>
              </div>
              <div>
                <van-button
                  size="mini"
                  type="danger"
                  icon="plus"
                  round
                  @click="getGoods(index)"
                />
              </div>
            </div>
          </template>
        </van-tree-select>
      </van-tab>
      <van-tab title="面包外卖" />
      <van-tab title="提货卡券" />
      <van-tab title="商家入驻">
        <van-panel
          title="北京市东城区崇文门西大街4-1新侨饭店对面"
          icon="location-o"
        >
          <van-icon name="phone" style="margin-left: 18px" />
          16677778888
        </van-panel>
        <van-divider />
        <van-panel title="配送服务" desc="提供高品质送餐服务" icon="orders-o">
          <div>
            <van-panel title="配送时间: 10:00-19:00" icon="clock-o">
            </van-panel>
          </div>
        </van-panel>
        <van-divider />
        <van-panel title="商家服务" icon="passed">
          <div>
            <van-panel title="可开发票" icon="edit"></van-panel>
            <van-panel title="跨天预定" icon="volume-o"></van-panel>
          </div>
        </van-panel>
      </van-tab>
    </van-tabs>

    <!-- 底部 -->
    <tabbar />
  </div>
</template>

<script>
import Tabbar from "../components/Tabbar.vue";
import { mapMutations } from "vuex";
import Navbar from "../components/Navbar.vue";
export default {
  components: { Tabbar, Navbar },
  data() {
    return {
      // 按钮状态
      checked: true,
      haha: "home",
      active: 0,
      select: 0,
      birthcake: [
        { text: "新品上市" },
        { text: "经典甄选" },
        { text: "萌宝之选" },
        { text: "寿星双全" },
        { text: "特色口味" },
        { text: "青春专属" },
        { text: "庆典时刻" },
      ],
      list: [],
    };
  },
  methods: {
    ...mapMutations(["addGoods"]),
    toSearch() {
      this.$router.push("/search");
    },
    toDetail() {
      this.$router.push("/goodsdetail");
    },
    getData() {
      let url = "/shop/goodslist?category_id=" + this.select;
      this.axios
        .get(url)
        .then((res) => {
          console.log(res);
          this.list = res.data.results;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    getGoods(index) {
      this.addGoods({
        id: this.list[index].id,
        img: this.list[index].image,
        title: this.list[index].goods_name,
        price: this.list[index].price,
        count: 1,
      });
    },
  },
  mounted() {
    this.getData();
  },
  watch: {
    select() {
      this.getData();
    },
  },
};
</script>

<style scoped>
.van-card__content:nth-child(1) {
  min-height: 24px !important;
}
.address-span {
  float: left;
  width: 70%;
  height: 24px;
}
.address-span > span,
.address-span > i {
  float: left;
  line-height: 24px;
}
.address-span > span {
  width: calc(100% - 24px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: keep-all;
}
.address-btn {
  float: right;
  margin: 0 15px;
}
.address-btn > button {
  border: 0;
  color: #fff;
  background-color: #e4004f;
}
.goodsCard {
  position: relative;
}
.goodsCard::after {
  content: "";
  display: block;
  clear: both;
}
.goodsCard > div,
.goodsCard > div > div {
  float: left;
}
.goodsCard > div > div > h4 {
  margin: 2px;
}
.goodsCard > div > div > span {
  color: #ee0a24;
}
.goodsCard > div:last-child {
  position: absolute;
  top: 50%;
  right: 25px;
  transform: translate(-50%, -50%);
}
.top {
  width: 375px;
  height: 46px;
  background-color: #e4004f;
}
.addtoCar {
  /* 购物车加减 */
  width: 25 px;
  height: 25 px;
  float: right;
  margin-right: 5 px;
  border-radius: 12.5 px;
  font-size: 16px;
  text-align: center;
  font-style: normal;
  line-height: 23px;
  font-weight: bold;
  color: #fff;
  /* background-color: #c00; */
  background-color: #e4004f;
}
</style>
